<template>
  <div class="echartsRadar_container">
    <div id="myRadar" class="echartsRadar_div"></div>
  </div>
</template>

<script>
import 'echarts/lib/chart/radar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import * as echarts from 'echarts/lib/echarts'
import { dataFormatWidthUnitLevel } from '@/filters/filter'
export default {
  props: {
    echartsRadarData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      optionColor: [], // 雷达图颜色
      referenceValue: [], // 全司的值
      indicatorValue: [], // 指标的值
      seriesData: [], // 雷达图数据
      tooltipData: []
    }
  },
  methods: {
    radarContent(newVal) {
      // 指标是一定有数据，全司不一定，全司可为空
      const indicator = newVal.indicator && newVal.indicator.slice(0, 6) // 指标
      const reference = newVal.reference && newVal.reference.slice(0, 6) // 全司
      if (indicator && indicator.length > 0) {
        indicator.map(i => {
          newVal.reference.map(r => {
            if (i.name === r.name) {
              i.referenceValue = r.value
              this.indicatorValue.push(i.value)
              this.referenceValue.push(r.value)
            }
          })
          i.max = Math.max(...this.indicatorValue, ...this.referenceValue)
        })
        this.tooltipData = indicator
        this.optionColor.push('rgba(86, 97, 126, 1)', 'rgba(10, 130, 250, 1)')
        this.seriesData.push(
          {
            value: this.referenceValue
          },
          {
            value: this.indicatorValue
          }
        )
      } else {
        reference.map(r => {
          this.referenceValue.push(r.value)
          r.max = Math.max(...this.referenceValue)
        })
        this.tooltipData = reference
        this.optionColor.push('rgba(10, 130, 250, 1)')
        this.seriesData.push({
          value: this.referenceValue
        })
      }
      const option = {
        tooltip: {},
        color: this.optionColor,
        radar: [
          {
            indicator: this.tooltipData,
            axisLine: {
              // (圆内的几条直线)坐标轴轴线相关设置
              lineStyle: {
                color: '#3A3E47'
              }
            },
            splitLine: {
              // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
              lineStyle: {
                color: '#3A3E47'
              }
            },
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ['transparent']
              }
            }
          },
          {
            indicator: this.tooltipData,
            // axisLine: {
            //   //隐藏第二个雷达维度的指示器名称
            //   lineStyle: {
            //     color: 'transparent'
            //   }
            // },
            name: {
              // (圆外的标签)雷达图每个指示器名称的配置项。
              formatter: function(value) {
                const list = value.split('')
                let result = ''
                for (let i = 1; i <= list.length; i++) {
                  if (!(i % 5) && list[i] !== undefined) {
                    result += list[i - 1] + '\n'
                  } else {
                    result += list[i - 1]
                  }
                }
                return result
              },
              textStyle: {
                fontSize: 14,
                color: '#fff',
                fontWeight: 400
              }
            },
            // nameGap: 5,
            axisLine: {
              // (圆内的几条直线)坐标轴轴线相关设置
              lineStyle: {
                color: '#3A3E47'
              }
            },
            splitLine: {
              // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
              lineStyle: {
                color: '#3A3E47'
              }
            },
            splitArea: {
              // 坐标轴在 grid 区域中的分隔区域，默认不显示。
              show: true,
              areaStyle: {
                // 分隔区域的样式设置。
                color: ['transparent']
              }
            }
          }
        ],
        series: [
          {
            type: 'radar',
            radarIndex: 0,
            itemStyle: {
              borderWidth: 0.5,
              borderColor: '#fff'
            },
            areaStyle: {
              normal: {
                color: 'rgba(86,97,126,0.4)'
              }
            },
            tooltip: {
              show: false
            },
            data: this.seriesData
          },
          {
            name: '预算 ',
            type: 'radar',
            symbol: 'none', // 隐藏雷达图点的颜色
            lineStyle: {
              // 隐藏雷达图线的颜色
              color: 'transparent'
            },
            radarIndex: 1, // 使用第二个维度的雷达图配置
            zlevel: 2, // 覆盖住原来的雷达图
            itemStyle: {
              borderWidth: 0.5,
              borderColor: '#fff'
            },
            areaStyle: {
              normal: {
                color: 'rgba(86,97,126,0.4)'
              }
            },
            tooltip: {
              borderWidth: 0,
              axisPointer: {
                type: 'shadow'
              },
              textStyle: {
                color: '#e9e9ed'
              },
              extraCssText: 'z-index: 0',
              backgroundColor: '#393f52',
              formatter: params => {
                const { data } = params.data
                return `${params.name}<br />${
                  indicator && indicator.length > 0
                    ? '参考值' +
                      dataFormatWidthUnitLevel(data[0], 'pt') +
                      '<br />当前值' +
                      dataFormatWidthUnitLevel(data[1], 'pt')
                    : '当前值' + dataFormatWidthUnitLevel(data[0], 'pt')
                }`
              }
            },
            data: [
              {
                value: [this.referenceValue[0], 0, 0, 0, 0, 0],
                data: [this.referenceValue[0], this.indicatorValue[0]],
                name: this.tooltipData[0].name
              },
              {
                value: [this.indicatorValue[0], 0, 0, 0, 0, 0],
                data: [this.referenceValue[0], this.indicatorValue[0]],
                name: this.tooltipData[0].name
              },
              {
                value: [0, this.referenceValue[1], 0, 0, 0, 0],
                data: [this.referenceValue[1], this.indicatorValue[1]],
                name: this.tooltipData[1].name
              },
              {
                value: [0, this.indicatorValue[1], 0, 0, 0, 0],
                data: [this.referenceValue[1], this.indicatorValue[1]],
                name: this.tooltipData[1].name
              },
              {
                value: [0, 0, this.referenceValue[2], 0, 0, 0],
                data: [this.referenceValue[2], this.indicatorValue[2]],
                name: this.tooltipData[2].name
              },
              {
                value: [0, 0, this.indicatorValue[2], 0, 0, 0],
                data: [this.referenceValue[2], this.indicatorValue[2]],
                name: this.tooltipData[2].name
              },
              {
                value: [0, 0, 0, this.referenceValue[3], 0, 0],
                data: [this.referenceValue[3], this.indicatorValue[3]],
                name: this.tooltipData[3].name
              },
              {
                value: [0, 0, 0, this.indicatorValue[3], 0, 0],
                data: [this.referenceValue[3], this.indicatorValue[3]],
                name: this.tooltipData[3].name
              },
              {
                value: [0, 0, 0, 0, this.referenceValue[4], 0],
                data: [this.referenceValue[4], this.indicatorValue[4]],
                name: this.tooltipData[4].name
              },
              {
                value: [0, 0, 0, 0, this.indicatorValue[4], 0],
                data: [this.referenceValue[4], this.indicatorValue[4]],
                name: this.tooltipData[4].name
              },
              {
                value: [0, 0, 0, 0, 0, this.referenceValue[5]],
                data: [this.referenceValue[5], this.indicatorValue[5]],
                name: this.tooltipData[5].name
              },
              {
                value: [0, 0, 0, 0, 0, this.indicatorValue[5]],
                data: [this.referenceValue[5], this.indicatorValue[5]],
                name: this.tooltipData[5].name
              }
            ]
          }
        ]
      }
      this.$nextTick(() => {
        const myRadar = echarts.init(document.getElementById('myRadar'))
        // 绘制图表
        myRadar.setOption(option, true)
      })
    }
  },
  watch: {
    echartsRadarData: {
      deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        this.radarContent(newVal)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.echartsRadar_container {
  padding-bottom: 40px;
  .echartsRadar_div {
    height: 240px;
  }
}
.noData-container {
  width: 375px;
  .noData {
    width: 180px;
    height: 167px;
    margin: 175px auto 0px;
    display: block;
  }
  .noDataMessage {
    text-align: center;
    font-weight: 400;
    color: rgba(233, 233, 237, 0.64);
    line-height: 20px;
    font-size: 14px;
    padding-top: 5px;
  }
}
</style>
